<div id="hero-component">
    <label for="search-box">Hero Search</label>
    <!-- (input)事件是指只要输入就会触发 -->
    <input #searchBox id="search-box" (input)="search(searchBox.value)">

    <ul class="search-result">
      <!-- 由于ngFor里面不支持obserable对象，因此需要管道|转换为async，它会自动订阅，不用再组件中subscribe了 -->
      <li *ngFor="let hero of heroes$ | async">
        <a routerLink="/detail/{{hero.id}}">{{hero.name}}</a>
      </li>
    </ul>
</div>
